<title>选课搜索</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a><cite>选课</cite></a>
        <a><cite>公共课</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">课程列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-page" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<div layui-hide>
    <a id="choose" lay-href='menu/elective/electiveclass'></a>
</div>
<script type="text/html" id="lineBar">
    <a class="layui-btn layui-btn-xs" lay-event="choose">选课</a>
</script>

<script type="text/html" id="toolbarlist">
    <div class="layui-form-item">
        <div class="layui-input-inline" style="width: 80px; float:left; margin-left: 0px">
            <select lay-filter="campus" id="campus" name="campus">
                <option value="All" selected>ALL</option>
                <option value="LAO">崂山</option>
                <option value="YU">鱼山</option>
            </select>
        </div>
        <div class="layui-input-inline" style="width: 100px;float:left; margin-left: 10px">
            <select lay-filter="type" id="type" name="type">
                <option value="All" selected>ALL</option>
                <option value="Public">公共基础</option>
                <option value="Common">通识</option>
                <option value="CommonMooc">通识Mooc</option>
                <option value="AdvancedEnglish">英语</option>
                <option value="PE">体育</option>
                <option value="Physics">物理</option>
                <option value="Chemistry">化学</option>
                <option value="Math">数学</option>
                <option value="Polity">思政军事</option>
                <option value="BasicComputer">计算机基础</option>
            </select>
        </div>
        <div class="layui-input-inline" style="width: 80px; float: left; margin-left: 10px">
            <input id="keyword" type="text" placeholder="搜索..." autocomplete="off" class="layui-input" lay-event="serach">
        </div>
    </div>
</script>
<script>
    layui.use(['jquery', 'table'], function(){
        var $ = layui.$, form = layui.form,
            table = layui.table;
        var tablelns;
        function getType(type) {
            switch (type) {
                case "Public":
                    return "公共基础";
                case "Common":
                    return "通识";
                case "CommonMooc":
                    return "通识Mooc";
                case "PE":
                    return "体育";
                case "AdvancedEnglish":
                    return "英语";
                case "Polity":
                    return "思政军事";
                case "Physics":
                    return "物理";
                case "Chemistry":
                    return "化学";
                case "Math":
                    return "数学";
                case "BasicComputer":
                    return "计算机基础";
                default:
                    return "未知类型"
            }
        }
        // 先判断url中有无keyword,是否从其他页面转来的
        var url = window.location.href;
        var index = url.indexOf("=");
        if (index !== -1) {
            var keyword = url.substr(index + 1);
            renderTable(decodeURI(keyword));
        }else {
            renderTable("");
        }

        function renderTable(keyword) {
            tablelns = table.render({
                elem: '#test-table-page'
                ,url: "/jw/course/public/All/All"
                ,toolbar: '#toolbarlist'
                ,where: {keyword:keyword}
                ,cols: [[
                    {field:'className', minWidth:200, title: '课程名', align: 'left'}
                    ,{field:'campus', minWidth:95, title: '校区'}
                    ,{field:'type', minWidth: 90, title:'类别', align:'left', templet: function (d) {return getType(d.type)}}
                    ,{align:'center', minWidth:65, title:'操作', toolbar:'#lineBar'}
                ]]
                ,parseData: function(res) {
                    return {
                        "status": res.status,
                        "message": res.message,
                        "data": res.data
                    };
                }
                ,done: function () {
                    // 监听搜索框enter
                    $('#keyword').bind('keypress', function (event) {
                        if (event.keyCode === 13) {
                            var keyword = $('#keyword').val();
                            if (keyword !== "" && keyword !== undefined && keyword !== null) {
                                reloadTable();
                            }
                        }
                    });
                    // 隐藏自带工具栏
                    $('.layui-table-tool-self').hide();
                    // 修改自带样式
                    $('.layui-table-tool-temp').css('padding-right', '0px')
                }
                ,response: {
                    statusName: 'status'
                    ,statusCode: 200
                    ,msgName: 'message'
                    ,dataName: 'data'
                }
            });
        }
        // 监听校区
        form.on('select(campus)', function () {
            var load = layer.load(2);
            reloadTable();
            layer.close(load);
        });
        // 监听课程类别
        form.on('select(type)', function (obj) {
            var load = layer.load(2);
            reloadTable();
            layer.close(load);
        });



        function reloadTable() {
            var keyword = $('#keyword').val();
            var campus = $('#campus').val();
            var type = $('#type').val();
            tablelns.reload({
                url: "/jw/course/public/" + campus + "/" + type,
                where: {keyword: keyword},
                done: function (res, curr, count) {
                    $('#campus').val(campus);
                    $('#type').val(type);
                    form.render('select');
                    // 监听搜索框enter
                    $('#keyword').bind('keypress', function (event) {
                        if (event.keyCode === 13) {
                            var keyword = $('#keyword').val();
                            if (keyword !== "" && keyword !== undefined && keyword !== null) {
                                reloadTable();
                            }
                        }
                    });
                    // 隐藏自带工具栏
                    $('.layui-table-tool-self').hide();
                    // 修改自带样式
                    $('.layui-table-tool-temp').css('padding-right', '0px')
                }
            })
        }
        
        table.on('tool(test)', function (obj) {
            layui.data('choose', {
                key:'className',
                value: obj.data.className
            });
            $('#choose').click();
        })
    });
</script>